<template>
  <div class="app-container">

    <!-- 学院管理员管理 -->

    <query-panel @query = 'handleFilter' @reset="resetQuery();handleFilter()" 
          :showOpen="false" labelWidth="100px">
          
        

          <el-form-item label="管理员工号">
            <el-input v-model="listQuery.staffId" class="filter-item" placeholder="请输入工号" maxlength="30"   clearable="" />
          </el-form-item>
            <el-form-item label="管理员姓名">
            <el-input v-model="listQuery.staffName" class="filter-item" placeholder="请输入姓名" maxlength="30"   clearable="" />
          </el-form-item>
          <el-form-item label="单位名称">
            <CollegeSelect v-model="listQuery.collegeId" class="filter-item"/>
          </el-form-item>
          
            
        </query-panel>

    <!-- 院级管理 -->
    <div class="page-toolbar">      
      <el-button class="filter-item" type="primary"  @click="handlePublish">添加</el-button>
    </div>

    

    <!-- 查询结果 -->
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      :height="tableHeight() -48"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        align="center"
        min-width="250"
        label="管理员姓名"
        prop="staffName"
      />
      <el-table-column
        align="center"
        min-width="250"
        label="管理员工号"
        prop="staffId"
      />
      <el-table-column
        align="center"
        min-width="250"
        label="所属学院"
        prop="staffId"
      >
      
      <template #default="scope">
        {{ scope.row.dictCollege.shortname }}
      </template>
      </el-table-column>

      

      <el-table-column
        align="center"
        label="操作"
        min-width="250"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pageHolder">
      <el-pagination
        background
        v-model:page-size="listQuery.limit"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="pageChange"
        @size-change="handleSizeChange"
      />
    </div>

    <el-dialog
      :title="formTitle"
      v-model="showAdd"
      :close-on-click-modal="false"
      width="60%"
      @close="handleClose"
      :close-on-press-escape="false"
    >
      <el-form
        style="margin-top:30px"
        ref="formRef"
        :rules="rules"
        :model="theForm"
        label-width="100px"
      >
        <el-form-item label="输入工号" prop="staffId">
          <el-input
            v-model="theForm.staffId"
            maxlength="10"
            style="width: 250px"
            clearable=""
          >
            <template #append>
              <el-button size="small" type="primary" @click="handleAddUser">
                选择人员</el-button
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="选择学院" prop="collegeId" >
          <college-select v-model="theForm.collegeId" />
        </el-form-item>
        
        
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAdd = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)"
            >保 存</el-button
          >
        </div>
      </template>
    </el-dialog>

    <el-dialog
      title="选择人员"
      v-model="showSelectUser"
      @close="handleSelectUserClose"
      :close-on-click-modal="false"
      width="60%"
      :close-on-press-escape="false"
    >
      <user-select ref="userSelect" @select="handleSelectUser" />

      <template #footer>
        <el-button @click="showSelectUser = false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.pageHolder {
  padding: 20px 10px 10px;
  text-align: right;
}
.avatar {
  width: 200px;
}
</style>

<script setup lang="ts">
import { tableHeight } from "@/util/index.ts";
import configs from "@/util/config.ts";
import http from "@/api/js/http";
import {
  FormInstance
} from "element-plus";
import { ref, reactive, onMounted } from "vue";
import UserSelect from "@/components/select/UserSelect.vue";
import msg from "@/util/Message.ts";

const formRef = ref<FormInstance>();
const showAdd = ref(false);
const theForm = reactive<IAdminUser>({
    id:'',
    staffId:'',
    staffName:'',
});
const dialogFormVisible = ref(false);
const formTitle = ref("");
const list = ref<any>([]);
const showSelectUser = ref(false);
const total = ref<number>(0);
const listLoading = ref(true);
const listQuery = reactive({
  page: 1,
  staffId: null,
  staffName:null,
  collegeId:null,
  limit: configs.limit,
});

function resetQuery(){
  listQuery.page = 1;
  listQuery.limit = configs.limit;
}

const rules = ref({
  staffId: [{ required: true, message: "不能为空", trigger: "change" }],
  userRole: [{ required: true, message: "不能为空", trigger: "change" }],
});

onMounted(() => {
  getList();
});

function handleSelectUserClose() {
  // this.$refs['userSelect'].reset();
}
function pageChange(page: number) {
  listQuery.page = page;
  getList();
}
function handlePublish() {
  showAdd.value = true;
  initForm();
  formTitle.value = "添加学院部管理员";
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      doSubmit();
    } else {
      console.log("error submit!", fields);
    }
  });
};

function handleSizeChange() {
  getList();
}

function handleSelectUser(obj: any) {
  theForm.staffId = obj.staffId;
  showSelectUser.value = false;
}

function handleAddUser() {
  showSelectUser.value = true;
}

function doSubmit() {
  var url = "/AdminUser/createCollegeAdmin";
  var data = theForm;

  http.post(url, data).then((resp) => {
    console.log(resp);
    dialogFormVisible.value = false;
    showAdd.value = false;
    getList();
    msg.success();
  });
}

function getList() {
  listLoading.value = true;

  http
    .get<IList<IAdminUser>>("/AdminUser/list/college", listQuery)
    .then((resp) => {
      var respList = resp?.data?.list;
      list.value = respList;
      listLoading.value = false;
      if (resp?.data?.total) {
        total.value = resp?.data?.total;
      }
    })
    .catch(() => {
      list.value = [];
      total.value = 0;
      listLoading.value = false;
    });
}

function handleFilter() {
  listQuery.page = 1;
  getList();
}

function handleDelete(row: any) {
  msg.delConfirm().then(() => {
    doDelete(row);
  });
}

function doDelete(row: any) {
  var data = "id=" + row.id;

  http
    .post("/AdminUser/delete", data)
    .then(() => {
      msg.success("删除成功");
      getList();
    })
    .catch(() => {
      msg.error("删除失败");
    });
}

function handleClose() {
  initForm();
  formRef.value?.clearValidate();
}

function initForm(){
  theForm.id = '';
  theForm.staffId = '';
  theForm.userRole = '';
}

</script>
